<template>
  <div class="login w-screen h-screen relative">
    <div class="login-form flex justify-center items-center">
      <div class="h-4/5 w-4/5 flex flex-col">
        <span class="text-slate-900 dark:text-slate-200 text-3xl font-bold mb-5">北极星</span>
        <t-form
          autocomplete="off"
          :data="loginForm"
          ref="formRef"
          :rules="loginFormRules"
          labelAlign="top"
          class="!mt-6"
        >
          <t-form-item label="账号" name="username" initial-data="TDesign">
            <t-input size="large" v-model="loginForm.username" placeholder="请输入账号">
              <template #prefix-icon>
                <icon name="user" />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item label="密码" name="password" initial-data="123456">
            <t-input
              autocomplete="new-password"
              v-model="loginForm.password"
              type="password"
              size="large"
              placeholder="请输入密码"
            >
              <template #prefix-icon>
                <icon name="lock-on" />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item label="验证码" name="code">
            <div class="w-full flex">
              <div class="flex-1">
                <t-input size="large" v-model="loginForm.code" placeholder="验证码"></t-input>
              </div>
              <div>
                <img @click="initCaptchaVO" :src="imageSrc" />
              </div>
            </div>
          </t-form-item>
        </t-form>
        <div class="!mt-6 flex justify-between">
          <t-checkbox>记住密码</t-checkbox>
          <t-link theme="primary">忘记密码?</t-link>
        </div>
        <t-button @click="loginHandle" :loading="loginLoading" class="!mt-8" block size="large">登录</t-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Icon } from 'tdesign-icons-vue-next';
import { loginFormRules, useLogin } from './hooks/LoginHooks';
const { loginForm, initCaptchaVO, imageSrc, formRef, loginHandle, loginLoading } = useLogin();
initCaptchaVO();
</script>

<style scoped lang="less">
.login {
  /* 加载背景图 */
  background-image: url(../../assets/image/login/login.svg);
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  .login-form {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 30%;
    height: 80%;
    opacity: 1;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 19px 39px rgba(222, 225, 255, 1);

    backdrop-filter: blur(20px);
  }
}

.dark {
  .login {
    background-image: url(../../assets/image/login/dark-login.png);

    .login-form {
      box-shadow: 0px 19px 39px rgba(31, 41, 55, 1);
    }
  }
}
</style>
